<template>
<div id="header">
    <p id="title">添加与查询</p>
    <div id="table">
        <div id="tr1">
            <div>
                <span>支付方式</span>
                <input type="text" name="parkarea" id="park-area" placeholder="请输入" v-model="addmsg.支付方式">
            </div>
            <div>
                 <span>路段编号</span>
                <input type="number" name="line-code" id="line-code" placeholder="请输入路段编号" v-model="addmsg.路段编号">
            </div>
            <div>
                <select-time ></select-time>
            </div>
        </div>
        <div id="tr2">
             <div>
                <span>收费员编号</span>
                <input type="number" name="shoufeiyaun-code" id="shoufeiyaun-code" placeholder="请输入数字" v-model="addmsg.收费员编号">
            </div>
            <div>
                <span>收费员</span>
                <input type="text" name="shoufeiyuan" id="shoufeiyuan" placeholder="请输入" v-model="addmsg.收费员">
            </div>
            <div>
                 <span>车牌号/查询车牌号</span>
                <input type="text" name="car-code" id="car-code" placeholder="通过车牌号查询" v-model="addmsg.车牌号">
                <button class="query" @click="query" title="只能通过车牌号查询">查询</button> <button class="reset" @click="reset">重置</button>
            </div>
        </div>
        <div id="tr3">
            <div>
                <span>应收金额&nbsp;&nbsp;</span>
                <input type="text"  placeholder="请输入金额" v-model="addmsg.应收金额">
            </div>
            <div>
                <!-- <span>路段地址</span> -->
                <span class="demonstration">路段地址</span>
                <el-cascader
                    id="address"
                    v-model="value"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleChange"></el-cascader>
                <button class="addbtn" title="请确保数据不为空" @click="add()">添加数据</button>
            </div>
            
        </div>
    </div>
    
   

    
</div>
  
</template>

<script>
import axios from 'axios'
import SelectTime from "./SeltctTime.vue"
import addressmsg from "./Data/address.json"
export default {
    data(){
        return {
           time:[],
           address:"",
           addmsg:{
            "车牌号":"",
            "停车时长":null,
            "入场时间":null,
            "出场时间":null,
            "应收金额":null,
            "收费员":"",
            "收费员编号":null,
            "路段编号":null,
            "路段地址":"",
            "支付方式":""
           },

           value: [],
           options:addressmsg
        }
    },
    components:{
        SelectTime
    },
    methods:{
        dateType(n1,n2){
            let date1=new Date(n1)
            let date2=new Date(n2)

            let YY1=date1.getFullYear()
            let YY2=date2.getFullYear()


            let  MM1 = (date1.getMonth() + 1 < 10 ? '0'+(date1.getMonth() + 1) : date1.getMonth() + 1);
            let  MM2 = (date1.getMonth() + 1 < 10 ? '0'+(date2.getMonth() + 1) : date2.getMonth() + 1);

            let DD1 = (date1.getDate() < 10 ? '0'+date1.getDate() : date1.getDate());
            let DD2 = (date2.getDate() < 10 ? '0'+date2.getDate() : date2.getDate());

            let hh1 = (date1.getHours() < 10 ? '0'+date1.getHours() : date1.getHours());
            let hh2 = (date2.getHours() < 10 ? '0'+date2.getHours() : date2.getHours());

            var mm1 = (date1.getMinutes() < 10 ? '0'+date1.getMinutes() : date1.getMinutes());
             var mm2 = (date2.getMinutes() < 10 ? '0'+date2.getMinutes() : date2.getMinutes());

             var ss1 = (date1.getSeconds() < 10 ? '0'+date1.getSeconds() : date1.getSeconds());
             var ss2 = (date2.getSeconds() < 10 ? '0'+date2.getSeconds() : date2.getSeconds());

             return [YY1 + '-' + MM1 + '-' + DD1 + '  ',YY1 + '-' + MM1 + '-' + DD1 + '  ' + hh1 + ':' + mm1 + ':' + ss1,
             YY2 + '-' + MM2+ '-' + DD2 + '  ' + hh2 + ':' + mm2 + ':' + ss2]
        },
        query(){
            // console.log(this.dateType(this.$children[0].value1[0],this.$children[0].value1[1]));
             axios.get("http://182.61.148.161:3000/user/query",{
            params:{
                车牌号:this.addmsg.车牌号,
            }
            }).then(res=>{
                res.data
                this.$emit("changelist",res.data)
                this.addmsg.车牌号=null
            })
            
        },
         open2() {
        this.$message({
          message: '添加数据成功！',
          type: 'success'
        });
      },
        reset(){
            this.addmsg.车牌号="";
            this.addmsg.停车时长=null;
            this.addmsg.入场时间=null;
            this.addmsg.出场时间=null;
            this.addmsg.应收金额=null;
            this.addmsg.收费员="";
            this.addmsg.收费员编号=null;
            this.addmsg.路段编号=null;
            this.addmsg.路段地址="";
            this.addmsg.支付方式="";
           this.$parent.$children[2].renderall()
        },
        add(){
           let arr=this.dateType(this.$children[0].value1[0],this.$children[0].value1[1])
           this.addmsg.停车时长=arr[0]
           this.addmsg.入场时间=arr[1]
           this.addmsg.出场时间=arr[2]
           let addressarr=this.getaddress(this.value)
           this.addmsg.路段地址=addressarr[0]+" "+addressarr[1]+" "+addressarr[2]
           
            console.log(this.addmsg);
            axios.get("http://182.61.148.161:3000/user/add",{
                params:this.addmsg
            }).then(res=>{
                res.data
                console.log(res.data);
                    this.reset()
            }).then(window.location.reload())
        },
        getaddress(value){
             return   value.map(item=>{
                for(let val of addressmsg){
                    if(val.value==item){
                        addressmsg=val.children
                        return val.label
                    }
                }
            })
        },
        handleChange(value) {
        // let addressarr=this.getaddress(value)
        // this.value.address=addressarr[0]+" "+addressarr[1]+" "+addressarr[2]
        console.log(value);
      }
    }
}
</script>

<style scoped>
#header{
    width: 100%;
    height: auto;
    background-color: rgb(227 245 242 / 40%);
    padding-top: 10px;
    box-shadow: 2px 2px 2px #5859592b;
}
#title{
    font-family: "微软雅黑";
    margin: 0;
    font-weight: bold;
    color:#2e2f2f;
    font-size:18px ;
    text-align: left;
    height: auto;
    padding-left: 10px;
    box-sizing: border-box;
}
#table{
    display: flex;
    flex-direction: column;
}

#tr1 ,#tr2{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
}
#tr1 input,#tr2 input{
    margin-left: 10px;
    height: 24px;
    border-radius: 4px;
    border: #3a3b3b;
      box-shadow: 2px 2px 0 #585959;
}

#tr3{
    display:flex;
    align-items: center;
    height: 50px;
    padding-left: 70px;
}
#tr3>div:first-child input{
     height: 24px;
    border-radius: 4px;
    border: #3a3b3b;
     box-shadow: 2px 2px 0 #585959;
}
#tr3>div{
    margin-right: 50px;
}

#address {
    margin-left: 10px;
    width:600px;
    height: 24px;
    border-radius: 4px;
    border: #3a3b3b;
      box-shadow: 2px 2px 0 #585959;
}
#address div{
      box-shadow: 2px 2px 0 #585959;
}
#address input{
     box-shadow: 2px 2px 0 #585959;
}

.query,.addbtn,.reset{
    margin-left: 10px;
    width: 80px;
    background-color: rgb(40, 130, 232);
    color: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: 2px 2px 0 #585959;
    cursor: pointer;
}
.reset{
    background-color: rgba(105, 105, 106, 0.642);
}
</style>